<template>
  <div id="verify">
    <div class="verify-inner">
      <md-scroll-view :scrolling-x="false" ref="scrollView" :autoReflow="true">
        <md-notice-bar mode="link" icon="info-solid">绑定银行常见问题回答</md-notice-bar>
        <div class="personal-bank">
          <h2>实名验证，请绑定一张您名下的银行卡</h2>
          <div class="add-bank">
            <p>添加储蓄卡/信用卡</p>
            <md-field>
              <md-input-item title="卡号" v-model.trim="bankItem.card_num" placeholder="持卡人需与身份证姓名一致">
                <div class="bank-number-btn" slot="right">
                  <md-image-reader
                    name="reader1"
                    @select="onReaderSelect"
                    @complete="onReaderComplete"
                    @error="onReaderError"
                  ></md-image-reader>
                  <md-icon name="camera" size="lg"></md-icon>
                </div>
              </md-input-item>
              <md-input-item title="手机号" v-model.trim="bankItem.mobile" placeholder="银行预留手机号"></md-input-item>
              <div class="link-btn">
                <md-button
                  v-if="bandinfo.length == 0"
                  @click="addBankItem"
                  type="primary"
                  size="small"
                  plain
                  round
                >添加验证</md-button>
                <md-button v-else @click="addBankItem" type="primary" size="small" plain round>继续添加</md-button>
              </div>
            </md-field>
          </div>
          <ul v-if="bandinfo.length != 0">
            <li v-for="(item,index) in bandinfo" :key="index">
              <span>{{item.bank_name}}</span>
              <span>{{item.genre == "1" ? "储蓄卡": "借记卡"}}</span>
              <span>**** {{item.card_num.substr(-4)}}</span>
              <div class="del-btn" @click="delBank(index)">
                <md-icon name="delete" size="md"></md-icon>
              </div>
            </li>
          </ul>
        </div>
        <div class="register-btn">
          <md-button @click="registerSubmit" type="primary" round>注册完成</md-button>
        </div>
      </md-scroll-view>
    </div>
  </div>
</template>

<script>
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import https from "@/https";
import config from "@/config";
import {
  Toast,
  Dialog,
  NoticeBar,
  InputItem,
  Field,
  Tag,
  ImageReader
} from "mand-mobile";
export default {
  components: {
    [Dialog.name]: Dialog,
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Tag.name]: Tag,
    [ImageReader.name]: ImageReader
  },
  name: "verify",
  data() {
    return {
      bankName: "", //银行人
      bankItem: {
         mobile: "", //绑定银行的手机
        bank_name: "", //银行名称
        card_num: "", //卡号
        genre: "1", //借记卡 银行卡类型 input type="hidden"
        open_bank_name: '',//无用
        name: '', //无用
        verify_money: 0,//无用

        cardType: "",//银行卡类型
        sex: "",    //性别
        area: "", //住址
        province: "", //省份
        city: "", //城市
        prefecture: "", //区
        birthday: "", //生日
        addrCode: "", //地区码
      },
      bandinfo: [] //银行卡列表
    };
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    //  上传图片
    onReaderSelect() {
      Toast.loading("图片上传中...");
    },
    onReaderComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        let params = {
          image: dataUrl
        };
        https
          .fetchPost(config.putBandCard, params)
          .then(res => {
            Toast.hide();
            console.log(res.data);
            if (res.data.code == 1) {
              this.bankItem.card_num = res.data.data.result.bank_card_number;
              this.bankItem.genre = res.data.data.result.bank_card_type;
              this.bankItem.bank_name = res.data.data.result.bank_name;
              Toast.succeed("添加成功", 2500);
            } else {
              Toast.info(res.data.msg);
            }
          })
          .catch(err => {
            Toast.hide();
            console.log(err);
            Toast.info("异常", err.data.msg);
          });
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    addBankItem() {
      let _this = this;
      let item = this.bankItem;
      if (
        item.bank_name == "" ||
        item.card_num == "" 
      ) {
        Toast.info("请先填写银行信息", 2500);
        return;
      }
      if (item.card_num == "") {
        Toast.info("请先填写银行信息", 2500);
        return;
      }
      let mobile = this.bankItem.mobile;
      const verify = /^1[345789]\d{9}$/; //电话号正则
      mobile = mobile.replace(/\s+/g, "");
      if (!verify.test(mobile) && mobile.length != 11) {
        Toast.info("请输入正确手机号", 2000);
        return;
      }
      let accountNo = this.bankItem.card_num.replace(/\s*/g, "");
      this.bankItem.card_num = accountNo;
      let idCard = this.$store.state.idinfo.idcard_num;
      let name = this.$store.state.idinfo.name;
      Dialog.confirm({
        title: "提示",
        content: "确认银行信息？",
        confirmText: "确定",
        onConfirm: () => {
          Toast.loading("验证中...");
          let params = {
            accountNo,
            idCard,
            mobile,
            name
          };
          https
            .fetchPost(config.identify, params)
            .then(res => {
              if (res.data.code == 1 && res.data.data.status == "01") {
                Toast.succeed(res.data.data.msg);
                let data = res.data.data;
                _this.bankItem.bank_name = data.bank;
                _this.bankItem.cardType =  data.cardType;
                _this.bankItem.sex = data.sex;
                _this.bankItem.area = data.area;
                _this.bankItem.province = data.province;
                _this.bankItem.city = data.city;
                _this.bankItem.prefecture = data.prefecture;
                _this.bankItem.birthday = data.birthday;
                _this.bankItem.addrCode = data.addrCode;
                _this.bankItem.open_bank_name = data.bank;
                _this.bankItem.name = data.name;
                _this.bankItem.verify_money = 0;

                _this.bankName = data.name;
                _this.bandinfo.push(_this.bankItem);
                _this.mobile = mobile;
                _this.bankItem = {
                  bank_name: "", //银行名称
                  card_num: "", //卡号
                  mobile: "", //手机号
                  genre: "1", //借记卡 银行卡类型 input type="hidden"
                  open_bank_name: '',//无用
                  name: '', //无用
                  verify_money: 0,//无用

                  cardType: "",//银行卡类型
                  sex: "",    //性别
                  area: "", //住址
                  province: "", //省份
                  city: "", //城市
                  prefecture: "", //区
                  birthday: "", //生日
                  addrCode: "", //地区码
                };
              } else {
                Toast.failed("验证不通过");
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    delBank(index) {
      Dialog.confirm({
        title: "提示",
        content: "确认删除该条银行卡？",
        confirmText: "确定",
        onConfirm: () => {
          this.bandinfo.splice(index, 1);
        }
      });
    },
    registerSubmit() {
      let landinfo = this.$store.state.landinfo;
      let idinfo = this.$store.state.idinfo;
      let bandinfo = this.bandinfo;
      let uid = this.$store.getters.getUserInfo.id;
      let mobile = this.mobile;
      let params = {
        uid,
        mobile,
        landinfo,
        idinfo,
        bandinfo
      };
      if (bandinfo.length == 0) {
        Toast.failed("请先添加一张您的银行卡");
        return;
      }
      if (idinfo.name != this.bankName) {
        Toast.failed("您的银行卡姓名与权利人不符");
        return;
      }
      Dialog.confirm({
        title: "提示",
        content: "确认提交注册信息？",
        confirmText: "确定",
        onConfirm: () => {
          Toast.loading("注册中...");
          https
            .fetchPost(config.register, params)
            .then(res => {
              Toast.hide();
              // console.log(res.data);
              if (res.data.code == 1) {
                Toast.succeed("资料已全部提交，等待最终审核", 2500);
                this.$store.commit("savePropertyInfo", []);
                this.$store.commit("saveIdentityInfo", []);
                this.$store.commit("saveUserInfo", []);
                setTimeout(() => {
                  this.$router.replace({
                    path: "/index"
                  });
                }, 1500);
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info("异常", err.data.msg);
            });
        }
      });
    }
  },
  mounted() {
    console.log("身份信息", this.$store.state);
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#verify {
  .verify-inner {
    height: 100vh;
  }
  .legal-person {
    padding: 20px 30px 40px;
    border-bottom: 1px dashed #ccc;
    .tip {
      font-size: 28px;
      color: #666;
      text-align: center;
      line-height: 40px;
      margin: 20px 0 0;
    }

    .bank-info {
      box-shadow: 0 0 12px 1px #e1e1e1;
      border-radius: 20px;
      padding: 20px 0;
      margin-top: 28px;
      h2 {
        font-size: 30px;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
      }
      p {
        font-size: 24px;
        color: #999;
        text-align: center;
        strong {
          font-size: 30px;
          font-weight: 600;
          color: $themeGold;
        }
      }
      .time-tip {
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }

  .personal-bank {
    padding: 30px 30px 0;
    h2 {
      font-size: 28px;
      color: #333;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .add-bank {
      box-shadow: 0 0 6px 1px #e1e1e1;
      border-radius: 20px;
      padding: 20px 0 8px;
      margin-top: 28px;
      p {
        font-size: 26px;
        color: #999;
        text-align: center;
      }
      .link-btn {
        margin-top: 40px;
        padding: 0 80px;
      }
      .bank-number-btn {
        position: relative;
      }
    }
    h3 {
      font-size: 28px;
      color: #666;
      margin: 40px 0;
      strong {
        font-size: 30px;
        font-weight: 600;
        color: $themeGold;
      }
    }
    ul {
      padding-top: 40px;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 6px 1px #e1e1e1;
        border-radius: 20px;
        padding: 20px 25px;
        margin-bottom: 30px;
        font-size: 26px;
        color: #666;
        .del-btn {
          display: flex;
          width: 60px;
          height: 100%;
          justify-content: center;
          color: $themeGold;
        }
      }
    }
  }
  .register-btn {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
}
</style>
